<template>
  <a-form
    :model="fromModel"
    ref="formRef"
    :rules="rules"
    @finish="onClickOk"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 14 }"
  >
    <a-form-item label="昵称" name="nick_name">
      <a-input
        v-model:value="fromModel.nick_name"
        placeholder="Hi，期待与您的互动"
      ></a-input>
    </a-form-item>
    <a-form-item label="邮箱" name="email">
      <a-input
        v-model:value="fromModel.email"
        placeholder="邮箱不会被公开，仅用于反馈与您相关的消息"
      ></a-input>
    </a-form-item>
    <a-form-item label="个人网站" name="site_url">
      <a-input
        v-model:value="fromModel.site_url"
        placeholder="Hi，期待与您的互动"
      ></a-input>
    </a-form-item>
    <a-form-item class="align-center" :wrapper-col="{ span: 24 }">
      <a-space>
        <a-button @click="onClickcancel">取消</a-button>
        <a-button class="btn-publish" html-type="submit" type="primary"
          >保存</a-button
        >
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref } from 'vue';

import { Form, Input, message } from 'ant-design-vue';
import { useStore } from '@/store';
import { CommentUserInfo } from '@/bean/dto';
import {
  EMAIL_VALIDATOR,
  REQUIRE_VALIDATOR_NAME,
  URL_VALIDATOR,
} from '@/utils/validator';
import { SET_COMMENT_USER_INFO } from '@/store/actiontype';
export default defineComponent({
  name: 'CommentUserInfo',
  components: {
    [Form.name]: Form,
    [Form.Item.name]: Form.Item,
    [Input.name]: Input,
  },
  props: {
    topic: {
      type: String,
      default: '评论',
    },
  },

  emits: ['cancel'],
  setup(props, { emit }) {
    // vuex
    const store = useStore();
    const commentUserInfo = computed(() => store.state.commentUserInfo);

    const formRef = ref();
    const fromModel = reactive<CommentUserInfo>(
      commentUserInfo.value || {
        nick_name: '',
        email: '',
        site_url: '',
      }
    );

    const rules = reactive({
      nick_name: [REQUIRE_VALIDATOR_NAME],
      email: [EMAIL_VALIDATOR],
      site_url: [URL_VALIDATOR],
    });

    const onClickcancel = () => {
      emit('cancel');
    };

    const onClickOk = async () => {
      await formRef.value.validate();
      message.success(`辛苦啦，可以去创建${props.topic}了！`);
      store.commit(SET_COMMENT_USER_INFO, fromModel);
      emit('cancel');
    };
    return { formRef, fromModel, onClickcancel, onClickOk, rules };
  },
});
</script>

<style scoped lang="scss">
:deep(.btn-publish) {
  margin-left: 10px;
}
</style>
